@import "@/styles/reset.scss";
body {
  height: 100%;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
}
a {
  text-decoration: none;
}
/* -------------------- 全局通用样式 -------------------- */
.flex {
  display: flex;
  .el-button + .el-button {
    margin-left: 0;
  }
}
.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex_between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex_align_item_center {
  display: flex;
  align-items: center;
}

.flex_column_center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex_wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex_space_around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex_middle {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.overflow2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all; //英文按字母换行
}
.g-red {
  color: #f56c6c !important;
}
.g-blue {
  color: #006eff;
}
/* -------------------- 动画 -------------------- */

/* fade-transform */
.fade-transiton-leave-active,
.fade-transiton-enter-active {
  transition: all 0.5s;
}
/* 可能为enter失效，拆分为 enter-from和enter-to */
.fade-transiton-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-transiton-enter-to {
  opacity: 1;
  transform: translateX(0px);
}

.fade-transiton-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* aside-transform */
.aside-transiton-leave-active,
.aside-transiton-enter-active {
  transition: all 0.3s ;
}
/* 可能为enter失效，拆分为 enter-from和enter-to */
.aside-transiton-enter-from {
  width: 0;
  transform: translateX(-10px);
}
.aside-transiton-enter-to {
  width: 100%;
  transform: translateX(0px);
}

.aside-transiton-leave-to {
  width: 0;
  transform: translateX(10px);
}
/* -------------------- 可左右移动组件的样式 -------------------- */
.splitpane_left {
  height: 100%;
  .splitpane-tree {
    height: 100%;
    border: 1px solid #ebeef5;
    width: 100%;
    .splitpane-tree-title {
      height: 40px;
      padding: 0px 10px;
      line-height: 1;
      box-sizing: border-box;
      font-size: 14px;
      background-color: #f5f7fa;
      > div:first-child {
        font-weight: bold;
        font-size: 14px;
        color: #303133;
      }
      .splitpane-tree-operate {
        cursor: pointer;
        i {
          display: inline-block;
          margin-left: 5px;
        }
      }
    }
    .splitpane-tree-content {
      height: calc(100% - 40px);
      .el-input__inner {
        border-radius: 0;
        border-left: none;
        border-right: none;
      }
      .el-input__inner:focus {
        border-color: #dcdfe6;
        outline: 0;
      }
      .el-input__inner:hover {
        border-color: #dcdfe6;
      }
      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }
      .el-tree-node__content {
        height: 32px;
        // padding-left: 24px !important
      }
    }
    .tree_main_content {
      height: calc(100% - 36px);
      overflow: auto;
      .splitpane-tree-node {
        font-size: 14px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-button-groups {
          padding-right: 10px;
          .el-button {
            padding: 4px;
          }
        }
      }
    }
  }

  .splitpane-tree-title {
    .el-button {
      i {
        font-size: 20px;
      }
    }
  }
}
.splitpane_right {
  height: 100%;
  // border: 1px solid #eee;
  .el-tabs {
    height: 100%;
    .el-tabs__content {
      height: calc(100% - 40px);
      padding: 10px;
      box-sizing: border-box;
      .el-tab-pane {
        height: 100%;
      }
    }
    .el-tabs__header {
      margin-bottom: 0;
      .el-tabs__item {
        font-weight: 700;
        min-width: 100px;
        text-align: center;
      }
    }
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-top: none;
    border-left: none;
    border-radius: 0;
  }
}

/* -------------------- 滚动条样式修改 -------------------- */
::-webkit-scrollbar-track-piece {
  background-color: none;
  /*滚动条的背景颜色*/
  border-radius: 0;
  /*滚动条的圆角宽度*/
  -webkit-border-radius: 0;
}

::-webkit-scrollbar {
  width: 8px;
  /*滚动条的宽度*/
  height: 10px !important;
  /*滚动条的高度*/
}

::-webkit-scrollbar-thumb:vertical {
  /*垂直滚动条的样式*/
  height: 50px;
  background: rgba(153, 153, 153, 0.5);
  border: 2px solid #fff;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  outline: 1px solid #fff;
  outline-offset: -2px;
}

::-webkit-scrollbar-thumb {
  /*滚动条的hover样式*/
  background: rgba(159, 159, 159, 0.3);
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  /*滚动条的hover样式*/
  background: rgba(159, 159, 159, 0.5);
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
/*** -------------------- 页面查询栏 -------------------- */
.seach_list {
  margin-left: auto;
  display: flex;
  .el-input {
    width: 160px !important;
    margin-left: 10px !important;
    margin-right: 0px !important;
  }
  .el-date-editor {
    width: 240px !important;
    margin-left: 10px !important;
    margin-right: 0px !important;
  }
  .el-button {
    margin-left: 10px !important;
    margin-right: 0px !important;
  }
  .el-select {
    width: 160px !important;
    margin-left: 10px !important;
    margin-right: 0px !important;
  }
  .select-dept-tree {
    display: inline-flex;
    align-items: center;
  }
}
/*** -------------------- 单表格样式 -------------------- */
.single-table-container {
  width: 100%;
  height: 96%;
  padding: 10px;
  //overflow: auto;
  .search-form-wrapper {
    height: 40px;
    display: flex;
    align-items: center;
    border: 1px solid #e6eaef;
    border-bottom: none;
    padding: 0 10px;
    .title {
      font-size: 14px;
      font-weight: 700;
      color: #303133;
    }
  }
  .single-table {
    height: calc(100% - 80px);
    .inner_table {
      padding: 10px;
      margin-top: -4px;
      margin-bottom: -4px;
    }
  }
  .table-pagination {
    text-align: right;
    height: 40px;
    background: #fff;
    border: 1px solid #e6eaef;
    border-top: unset;
    .el-pagination {
      padding: 6px 10px;
    }
  }
}
/*** -------------------- 分页栏 -------------------- */
.table-pagination {
  height: 40px;
  background: #fff;
  border: 1px solid #e6eaef;
  border-top: unset;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  // justify-content: space-between;
  .total {
    margin-left: 10px;
  }
  .pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: bold;
  }
}
